<template>
	<view class="container">
		<!-- 项目基本信息 -->
		<view class="section project-info">
			<view class="section-header">
				<text class="section-title">{{ projectData.title || '项目详情' }}</text>
			</view>
			<view class="info-content">
				<view class="info-item">
					<text class="info-label">样品类型:</text>
					<text class="info-value">{{ projectData.sampleType || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">液体种类:</text>
					<text class="info-value">{{ projectData.liquidType || '-' }}</text>
				</view>
				<view class="info-item" v-if="projectData.notes">
					<text class="info-label">备注:</text>
					<text class="info-value">{{ projectData.notes }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">创建时间:</text>
					<text class="info-value">{{ formatDateTime(projectData.createTime) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 分析结果列表 -->
		<view class="section analysis-list">
			<view class="section-header">
				<text class="section-title">分析结果</text>
				<text class="result-count">(共{{ analysisResults.length }}条)</text>
			</view>
			
			<view v-if="analysisResults.length === 0" class="empty-result">
				<text>暂无分析结果</text>
			</view>
			
			<view v-else class="analysis-items">
				<view 
					v-for="(result, index) in analysisResults" 
					:key="index"
					class="analysis-item"
					:class="{ 'active': activeIndex === index }"
					@click="selectResult(index)"
				>
					<view class="result-header">
						<text class="result-type">{{ result.type }}</text>
						<text class="result-date">{{ formatDateTime(result.date) }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 详细结果展示 -->
		<view v-if="activeResult" class="section result-detail">
			<view class="section-header">
				<text class="section-title">详细数据</text>
			</view>
			
			<!-- 图片展示 -->
			<view class="image-section" v-if="activeResult.imagePath">
				<image 
					:src="activeResult.imagePath" 
					mode="aspectFit"
					class="result-image"
					@click="previewImage(activeResult.imagePath)"
				></image>
			</view>
			
			<!-- 数据展示 -->
			<view class="data-section">
				<view 
					v-for="(value, key) in flattenedData" 
					:key="key"
					class="data-item"
				>
					<text class="data-label">{{ formatLabel(key) }}:</text>
					<text class="data-value">{{ formatValue(value) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import {onLoad} from '@dcloudio/uni-app'

// 当前项目ID
const projectId = ref('')
// 项目数据
const projectData = ref({})
// 分析结果数组
const analysisResults = ref([])
// 当前选中的结果索引
const activeIndex = ref(-1)

// 当前选中的结果
const activeResult = computed(() => {
	if (activeIndex.value >= 0 && activeIndex.value < analysisResults.value.length) {
		return analysisResults.value[activeIndex.value]
	}
	return null
})

// 扁平化的数据对象，用于显示
const flattenedData = computed(() => {
	if (!activeResult.value || !activeResult.value.data) {
		return {}
	}
	
	// 扁平化数据对象
	const result = {}
	const flatten = (obj, prefix = '') => {
		for (const key in obj) {
			if (typeof obj[key] === 'object' && obj[key] !== null) {
				flatten(obj[key], prefix + key + '_')
			} else {
				result[prefix + key] = obj[key]
			}
		}
	}
	
	flatten(activeResult.value.data)
	return result
})

// 页面加载
onLoad((params) => {
	if (params && params.id) {
		projectId.value = params.id
		loadProjectData()
	} else {
		uni.showToast({
			title: '项目ID无效',
			icon: 'none',
			complete: () => {
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		})
	}
})

// 加载项目数据
const loadProjectData = () => {
	// 从存储中获取项目列表
	const projectList = uni.getStorageSync('projectList') || []
	// 查找当前项目
	const project = projectList.find(item => item.id === projectId.value)
	
	if (project) {
		projectData.value = project
		if (project.analysisResults && project.analysisResults.length > 0) {
			analysisResults.value = project.analysisResults
			// 默认选中第一个结果
			activeIndex.value = 0
		} else {
			analysisResults.value = []
		}
	} else {
		uni.showToast({
			title: '项目不存在',
			icon: 'none',
			complete: () => {
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		})
	}
}

// 选择结果
const selectResult = (index) => {
	activeIndex.value = index
}

// 预览图片
const previewImage = (imagePath) => {
	if (!imagePath) return
	
	uni.previewImage({
		urls: [imagePath],
		current: 0
	})
}

// 格式化日期时间
const formatDateTime = (timestamp) => {
	if (!timestamp) return '-'
	
	const date = new Date(timestamp)
	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

// 格式化标签
const formatLabel = (key) => {
	return key.replace(/([A-Z])/g, ' $1')
		.replace(/_/g, ' ')
		.replace(/^\w/, c => c.toUpperCase())
}

// 格式化数值
const formatValue = (value) => {
	if (typeof value === 'number') {
		return value.toFixed(2)
	}
	return value
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.section {
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #f0f0f0;
	padding-bottom: 16rpx;
	margin-bottom: 16rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.result-count {
	font-size: 24rpx;
	color: #999;
	margin-left: 10rpx;
}

/* 项目信息样式 */
.project-info {
	margin-bottom: 20rpx;
}

.info-content {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.info-item {
	display: flex;
	line-height: 1.6;
}

.info-label {
	width: 180rpx;
	font-size: 28rpx;
	color: #666;
}

.info-value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

/* 分析结果列表样式 */
.analysis-items {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.analysis-item {
	background-color: #f9f9f9;
	border-radius: 8rpx;
	padding: 16rpx;
	transition: all 0.3s;
}

.analysis-item.active {
	background-color: #e6f7ff;
	border-left: 4rpx solid #1890ff;
}

.result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.result-type {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
}

.result-date {
	font-size: 24rpx;
	color: #999;
}

.empty-result {
	text-align: center;
	padding: 40rpx 0;
	color: #999;
	font-size: 28rpx;
}

/* 详细结果展示样式 */
.result-detail {
	margin-bottom: 40rpx;
}

.image-section {
	margin-bottom: 20rpx;
	background-color: #f0f0f0;
	border-radius: 8rpx;
	overflow: hidden;
}

.result-image {
	width: 100%;
	height: 400rpx;
}

.data-section {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.data-item {
	display: flex;
	padding: 10rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.data-label {
	width: 240rpx;
	font-size: 26rpx;
	color: #666;
}

.data-value {
	flex: 1;
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
}
</style> 